/* 行为相关颜色 */
$--primary-color-variant1: #0a57c1; /* 深一点的蓝色 */
$--primary-color-variant2: #1a67d9; /* 亮一点的蓝色 */
$--primary-color-variant3: #2a74e6; /* 更亮的蓝色 */

$--success-color-variant1: #38c172; /* 深一点的绿色 */
$--success-color-variant2: #45d666; /* 亮一点的绿色 */
$--success-color-variant3: #52e36a; /* 更亮的绿色 */

$--warning-color-variant1: #eb9316; /* 深一点的橙色 */
$--warning-color-variant2: #f0a53d; /* 亮一点的橙色 */
$--warning-color-variant3: #f5b754; /* 更亮的橙色 */

$--error-color-variant1: #f45a5a; /* 深一点的红色 */
$--error-color-variant2: #f66c6c; /* 亮一点的红色 */
$--error-color-variant3: #f87e7e; /* 更亮的红色 */

$--danger-color-variant1: #f35656; /* 深一点的红色 */
$--danger-color-variant2: #f46767; /* 亮一点的红色 */
$--danger-color-variant3: #f57979; /* 更亮的红色 */

$--info-color-variant1: #7f8c8d; /* 深一点的灰色 */
$--info-color-variant2: #8a9a9b; /* 亮一点的灰色 */
$--info-color-variant3: #95a5a6; /* 更亮的灰色 */

$--secondary-color-variant1: #fa7b36; /* 深一点的橙色 */
$--secondary-color-variant2: #fb8a47; /* 亮一点的橙色 */
$--secondary-color-variant3: #fca95a; /* 更亮的橙色 */



@mixin ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin line-clamp-2() {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@mixin line-clamp-3() {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

@mixin line-clamp($num) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $num;
  overflow: hidden;
}

@mixin scrollbar($height: 0, $width: 8px) {
  @if $height != 0 {
    height: $height;
  }
  overflow-x: hidden;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: $width;
    position: absolute;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    transition: all 0.5s;
  }
  &:hover {
    &::-webkit-scrollbar-thumb {
      background-color: rgba(255, 250, 250, 0.5);
    }
  }
}
